/**
 * 抽奖系统主程序
 * 实现抽奖的核心逻辑、界面交互和动画效果
 */

import Vue from 'vue'
import $ from 'zepto'
import { member as memberList, prizes } from './member.js'
import './tagcanvas.js'
import '../css/styles.css'

// 调试模式开关
const DEBUG = true

/**
 * 调试日志输出
 * @param {...any} args - 需要打印的内容
 */
function log(...args) {
  if (DEBUG) {
    console.log(...args)
  }
}

// 画布DOM对象
var canvas
// 创建一个新的数组来存储处理后的成员数据
let member = [...memberList]

/**
 * 音频资源配置
 */
const audioFiles = {
  enterBGM: new Audio('../audio/enter-BGM.m4a'), // 背景音乐
  lotterySound: new Audio('../audio/prizeDrawBgm.m4a'), // 抽奖音效
  resultSound: new Audio('../audio/AwardsBgm.m4a'), // 结果音效
}

/**
 * 音频管理器
 * 负责管理所有音频的播放、暂停等操作
 */
const AudioManager = {
  // 存储所有音频实例
  audioInstances: audioFiles,

  // 当前播放的音频
  currentAudio: null,

  /**
   * 播放指定音频
   * @param {string} audioName - 音频名称
   * @param {boolean} shouldLoop - 是否循环播放
   */
  play(audioName, shouldLoop = false) {
    // 停止当前播放的音频
    if (this.currentAudio) {
      this.currentAudio.pause()
      this.currentAudio.currentTime = 0
    }

    const audio = this.audioInstances[audioName]
    if (audio) {
      audio.loop = shouldLoop
      audio.volume = 0.5
      audio.play()
      this.currentAudio = audio
    }
  },

  // 停止所有音频播放
  stopAll() {
    Object.values(this.audioInstances).forEach((audio) => {
      if (audio) {
        audio.pause()
        audio.currentTime = 0
      }
    })
    this.currentAudio = null
  },
}

/**
 * 初始化音频系统
 * 加载并播放背景音乐
 */
const initAudio = () => {
  AudioManager.play('enterBGM', true)
}

/**
 * 监控窗口大小变化，重绘canvas
 * 确保在窗口调整大小时抽奖界面正常显示
 */
window.onresize = function () {
  $('#myCanvas').remove()
  $('#main').removeClass('mask')
  createCanvas(vm)
  vm.running = 0
}

// 从本地存储获取已中奖的人员名单
var choosed = JSON.parse(localStorage.getItem('choosed')) || {}

/**
 * 词云旋转速度配置
 * @returns {Array<number>} [x轴速度, y轴速度]
 */
var speed = function () {
  return [0.2, 0.08]
}

/**
 * 创建抽奖名单HTML
 * @param {Vue} self - Vue实例
 * @returns {string} 名单HTML字符串
 */
var createHTML = function (self) {
  var html = ['<ul>']
  member.forEach(function (item) {
    if (!choosed[item.name]) {
      html.push('<li><a href="#">' + item.name + '</a></li>')
    }
  })
  html.push('</ul>')
  return html.join('')
}

/**
 * 创建并初始化抽奖画布
 * @param {Vue} self - Vue实例
 */
var createCanvas = function (self) {
  const mainElement = document.getElementById('main')
  if (!mainElement) {
    console.error('找不到main元素')
    return
  }

  canvas = document.createElement('canvas')
  canvas.id = 'myCanvas'
  canvas.width = document.body.offsetWidth
  canvas.height = document.body.offsetHeight

  mainElement.appendChild(canvas)
  canvas.innerHTML = createHTML(self)

  try {
    TagCanvas.Start('myCanvas', '', {
      textColour: '#FFD700',
      initial: speed(),
      textHeight: 42,
      zoom: 1.05,
      dragControl: true,
    })
  } catch (e) {
    console.error('TagCanvas初始化失败:', e)
    document.getElementById('myCanvas').style.display = 'none'
  }
}

/**
 * 抽奖算法
 * @param {number} count - 抽取人数
 * @returns {Array<string>} 中奖人员名单
 */
var lottery = function (count) {
  var list = canvas.getElementsByTagName('a')
  var color = 'yellow'

  var ret = member
    // 过滤掉已中奖的人员
    .filter(function (m, index) {
      m.index = index
      return !choosed[m.name]
    })
    // 为每个人员分配随机权重
    .map(function (m) {
      return Object.assign(
        {
          score: Math.random(),
        },
        m
      )
    })
    // 按权重排序
    .sort(function (a, b) {
      return a.score - b.score
    })
    // 获取指定数量的中奖人员
    .slice(0, count)
    // 记录中奖信息
    .map(function (m) {
      choosed[m.name] = 1
      return m.name
    })

  // 保存中奖记录到本地存储
  localStorage.setItem('choosed', JSON.stringify(choosed))

  return ret
}

// Vue实例配置和方法实现
let vm = new Vue({
  el: '#app',
  data: {
    selected: 1, // 默认抽奖人数
    running: 0, // 抽奖状态(0:待开始, 1:抽奖中, 2:已结束)
    fullState: '全屏', // 全屏状态文本
    status: ['抽奖', '停！', '继续'], // 抽奖按钮文本
    prizes: prizes, // 奖品列表
    position: 0, // 当前抽取的奖品索引
    showResult: false, // 是否显示抽奖结果
  },

  computed: {
    // 反转奖品列表顺序
    prizesRverese: function () {
      let temp = []
      for (let i = this.prizes.length - 1; i >= 0; i--) {
        temp.push(this.prizes[i])
      }
      return temp
    },
  },

  // 生命周期钩子 - 组件挂载完成后执行
  mounted() {
    try {
      if (typeof TagCanvas === 'undefined') {
        throw new Error('TagCanvas未加载')
      }
      createCanvas(this)

      layui.use(['layer'], function () {
        window.layer = layui.layer
      })

      initAudio()
    } catch (e) {
      console.error('Vue mounted错误:', e)
    }
  },

  methods: {
    /**
     * 重置抽奖
     * 清空所有中奖记录
     */
    reset: function () {
      if (this.running != 0) {
        return
      }

      let index = layer.confirm(
        '确定要重置么？所有之前的抽奖历史将被移除！',
        function () {
          location.reload()
        }
      )
    },

    /**
     * 抽奖控制
     * 处理抽奖开始、停止和继续
     */
    toggle: function () {
      if (this.running === 0) {
        // 开始新一轮抽奖前，确认 position 是否有效
        if (this.position >= this.prizes.length) {
          this.position = 0 // 如果已经抽完所有奖项，重置为第一个奖项
        }
        AudioManager.play('lotterySound', true)
      }

      // 检查是否还有奖品可抽
      if (this.position >= this.prizes.length) {
        this.running = 0
        layer.msg('所有奖品都抽完了！')
        return
      }

      // 处理抽奖结果显示状态
      if (this.showResult) {
        this.showResult = !this.showResult
        this.running = 0
        $('#main').removeClass('mask')
        return
      }

      // 抽奖进行中
      if (this.running == 1) {
        TagCanvas.SetSpeed('myCanvas', speed())
        var ret = lottery(this.prizes[this.position].count)

        if (ret.length === 0) {
          layer.msg('所有都中奖了！')
          this.running = 0
          return
        } else {
          $('#main').addClass('mask')
          let level = ''

          // 设置奖品等级
          switch (this.prizes[this.position].level) {
            case 1:
              level = '一等奖'
              break
            case 2:
              level = '二等奖'
              break
            case 3:
              level = '三等奖'
              break
            default:
          }

          // 记录中奖信息
          this.prizes[this.position].person = ret

          // 重新创建抽奖画布
          $('#myCanvas').remove()
          createCanvas(this)

          // 记录中奖时间
          localStorage.setItem(new Date().toString(), ret[0])
        }

        this.running = 2
      } else if (this.running == 2) {
        // 抽奖结束，准备下一轮
        $('#main').removeClass('mask')
        this.running = 0
        this.position++ // 切换到下一个奖品
      } else {
        // 开始新一轮抽奖
        TagCanvas.SetSpeed('myCanvas', [5, 1])
        this.running = 1
        AudioManager.play('lotterySound', true)
      }
    },

    /**
     * 切换全屏显示
     */
    toggleFullScreen: function () {
      if (this.running != 0) {
        return
      }

      if (!document.fullscreenElement) {
        this.fullState = '正常'
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          this.fullState = '全屏'
          document.exitFullscreen()
        }
      }
    },

    /**
     * 显示中奖名单
     */
    showList: function () {
      if (this.running == 1) {
        return
      }

      this.running = 0

      if (this.showResult) {
        $('#main').removeClass('mask')
      } else {
        $('#main').addClass('mask')
      }

      this.showResult = !this.showResult
      AudioManager.play('resultSound', false)
    },

    /**
     * 显示中奖名单弹框
     * @param {Object} item - 奖品信息
     */
    showWinners: function (item) {
      let contentHtml = `
        <div class="layerModel">
          <div class="flex_center">
            <div class="FontStyle">${item.prize}-${item.name}</div>
            <img style="width: 150px; height: auto;margin:20px 0" src="${
              item.url
            }" alt="${item.name}" >
          </div>
          <div class="prizeWinnerStyle">
            <span > ${item.person.join('     ')} </span>
          </div>
        </div>
      `

      if (item.person.length > 0) {
        layer.open({
          type: 1,
          title: `当前奖项中奖信息`,
          area: ['40%', '50%'],
          content: contentHtml,
          shadeClose: true,
        })
      }
    },
  },
})
